<script setup lang="ts">
import { getLatestQuestions } from '@/api/subject';
import type { Question } from '@/api/subject/type';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';

const questions = ref<Question[]>([]);
const loading = ref(false);
const route = useRoute();
const router = useRouter();

const toAnswer = (id: string) => {
    router.push({
        name: 'QuestionAnswer',
        query: {
            id: id,
            subjectId: route.query.id
        }
    });
}

const getQuestionTypeLabel = (type: string) => {
    const types: Record<string, string> = {
        'Choice': '选择题',
        'Judge': '判断题',
        'Blank': '填空题',
        'Essay': '简答题'
    };
    return types[type] || type;
}

onMounted(() => {
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        loading.value = true;
        getLatestQuestions(id).then((res) => {
            questions.value = res.data;
        }).catch(() => {
            showToast('获取题目列表失败');
        }).finally(() => {
            loading.value = false;
        });
    }
})
</script>

<template>
    <div class="question-list">
        <van-empty 
            v-if="!loading && questions.length === 0" 
            image="search"
            description="暂无题目，请先添加题目"
        />
        
        <van-skeleton title :row="3" :loading="loading" v-for="i in 3" :key="`skeleton-${i}`" v-if="loading"></van-skeleton>
        
        <div v-if="!loading && questions.length > 0" class="question-grid">
            <div 
                v-for="question in questions" 
                :key="question.id"
                class="question-card"
                @click="toAnswer(question.id)"
            >
                <div class="question-type-tag" :class="question.type.toLowerCase()">
                    {{ getQuestionTypeLabel(question.type) }}
                </div>
                
                <div class="question-content">
                    <h3 class="question-title">{{ question.title }}</h3>
                    <div class="question-meta">
                        <span class="question-time">创建于: {{ question.created }}</span>
                    </div>
                </div>
                
                <div class="question-action">
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.question-list {
    padding: 16px 0;
    
    .question-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .question-card {
            display: flex;
            background-color: #f9fafc;
            border-radius: 8px;
            border: 1px solid #ebeef5;
            padding: 16px;
            transition: all 0.2s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            
            &:hover {
                background-color: #f5f7fa;
                transform: translateX(4px);
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            }
            
            .question-type-tag {
                position: absolute;
                top: 0;
                left: 0;
                padding: 4px 8px;
                font-size: 12px;
                color: white;
                border-bottom-right-radius: 6px;
                
                &.choice {
                    background-color: #409eff;
                }
                
                &.judge {
                    background-color: #67c23a;
                }
                
                &.blank {
                    background-color: #e6a23c;
                }
                
                &.essay {
                    background-color: #909399;
                }
            }
            
            .question-content {
                flex: 1;
                padding: 8px 16px 8px 64px;
                
                .question-title {
                    font-size: 15px;
                    font-weight: 500;
                    color: #303133;
                    margin: 0 0 8px 0;
                    line-height: 1.5;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                
                .question-meta {
                    display: flex;
                    align-items: center;
                    font-size: 13px;
                    color: #909399;
                }
            }
            
            .question-action {
                display: flex;
                align-items: center;
                color: #909399;
            }
        }
    }
}
</style>